import React, { Component } from 'react';
import Qiniu from 'react-qiniu';
import {browserHistory,hashHistory,Link} from 'react-router';
import {SingleInput} from './common/Forminput';
import { connect } from 'react-redux';
import { ProfileUpdate } from '../Redux/Actions/profileAction';
import SweetAlert from 'react-bootstrap-sweetalert';

const history = process.env.NODE_ENV !== 'production' ? browserHistory : hashHistory;

class AccountUpdate extends Component {
  constructor(props){
    super(props);
    this.state = {
      alertstate:"tohide",
      truename:props.profileReducer.userinfo.data.truename,
      phone:props.profileReducer.userinfo.data.phone,
      qq:props.profileReducer.userinfo.data.qq
    };
    this.handlesubmit = (event)=>{
      event.preventDefault(); 
      const token = this.props.authReducer.user.data.token;
      const opt ={
        truename:this.state.truename,
        phone:this.state.phone,
        qq:this.state.qq
      }
      for(let i in opt){
          if(opt[i]==null){
              opt[i] = "";
          }
      }
      this.props.dispatch(ProfileUpdate(token,opt));
      this.setState({
        alertstate:"toshow"
      })
    }
    this.fallbackParent = (name,value)=>{
      this.setState({[name]:value});
    }
  }

  render() {
    const user = this.props.profileReducer.userinfo.data;
    return (
        <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
          <div className="row">
            <ol className="breadcrumb">
              <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
              <li>我的账户</li>
            </ol>
          </div>
          <div className="row">
            <div className="col-lg-12">
              <div className="panel panel-default">
                <div className="panel-heading">
                  我的账户编辑
                  <Link className="pull-right btn btn-primary" style={{marginTop:"6px"}} to="/main/account">详情</Link>
                </div>
                <div className="panel-body">
                  <div className="form-horizontal">
                      <form>
                        <fieldset>
                        <SingleInput label="真实姓名" name="truename" placeholder="真实姓名" value={this.state.truename} backParent={this.fallbackParent}/>
                        <SingleInput label="手机号" name="phone" placeholder="手机号" value={this.state.phone} backParent={this.fallbackParent}/>
                        <SingleInput label="QQ" name="qq" placeholder="真实姓名" value={this.state.qq} backParent={this.fallbackParent}/>
                        <div className="box-btn">
                          <button type="submit" className="btn btn-primary" onClick={this.handlesubmit}>更改</button>
                        </div>
                      </fieldset>
                    </form>
                  </div>
                </div>
                <div  id="alertwrap" className={this.state.alertstate}>
                    <SweetAlert
                    info
                    confirmBtnText="确定"
                    confirmBtnBsStyle="primary"
                    title="您的帐户信息已提交。"
                    onConfirm={()=>{this.setState({alertstate:"tohide"});history.push("/main/account")}}
                    >
                    </SweetAlert>
                </div>
              </div>
            </div>
          </div>	
        </div>
    )
  }
}

export default connect((state) => {
    const { authReducer,profileReducer } = state;
    return {
        authReducer,profileReducer
    }
})(AccountUpdate); 